<style>
    .layui-btn .layui-icon{
        margin-right: 0;
    }
    .layui-form-pane .layui-form-label, .layui-form-pane .layui-input-inline{
        width: auto;
    }
    .view-data{
        height: 36px;
        line-height: 36px;
        display: inline-block;
        padding: 0 20px;
        border-style:solid;
        border-width:1px;
        background-color:#fff;
        border-radius:2px;
        border-color:#e6e6e6;
    }
    .table-body .layui-btn .iconfont{
        font-size: 17px !important;
    }
    .layui-card-body{
        background-color: #fff;
        padding: 10px;
        margin-top: 10px;
        border: 1px solid #e6e6e6;
    }
    .layui-tab-card>.layui-tab-title{
        background-color: #f9f9f9;
        border-bottom: none;
    }
    .layui-tab-content{
        padding: 0;
    }
    .layui-table, .layui-table-view{
        margin: 0;
    }
    .layui-form-item{
        margin-bottom: 0px;
    }
</style>
<form class="layui-form seller-form" method="POST" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">手机号：</label>
            <div class="layui-input-inline seller-inline-3">
                <input type="text" name="mobile" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="seach"><i class="iconfont icon-chaxun"></i>筛选</button>
            </div>
        </div>
    </div>
</form>

<div class="table-body">
    <div class="layui-tab layui-tab-brief" lay-filter="tabs">
        <ul class="layui-tab-title" >
            <li class="layui-this" data-handle="0">未处理</li>
            <li data-handle="">全部订单</li>
        </ul>
    </div>
    <table id="rechange" lay-filter="rechange"></table>
</div>
<script type="text/html" id="btn">
    {{# if(!d.handle && d.status==1) {  }}
    <a class="layui-btn layui-btn-xs edit-class" lay-event="handle" >处理</a>
    <a class="layui-btn layui-btn-xs edit-class" lay-event="dy" >打印</a>
    {{# } }}
    <!--a class="layui-btn layui-btn-xs edit-class layui-bg-red" lay-event="del" >删除</a-->
</script>
<script>
    var window_box, table;
    layui.use(['table', 'layer',  'form', 'element'], function () {
        var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                table = layui.table;

        var rechange = table.render({
            elem: '#rechange', //指定原始表格元素选择器（推荐id选择器）
            height: 'full-260',
            cellMinWidth: '80',
            limit:100,
            method: 'post',
            id:'rechange',
            url: "{:url('')}",
            cols: [[ //表头
                {type:'numbers'},
                {field: 'mobile', title: '手机号',align:'center', width:150},
                {field: 'nickname', title: '昵称',align:'center', width:150},
                {field: 'amount', title: '充值金额',align:'center', width:120},
                {field: 'pay_amount', title: '支付金额',align:'center', width:120},
                {field: 'status', title: '状态',align:'center', templet: function(data) {
                        if(data.status == 0) {
                            return '未支付'
                        } else if(data.status == 1) {
                            return '已支付'
                        } else {
                            return '已取消'
                        }
                }},
                {field: 'handle', title: '处理',align:'center', width:120, templet: function(data) {
                        if(data.handle == 0) {
                            return '未处理'
                        } else {
                            return '已处理'
                        }
                }},
                {field: 'memo', title: '推荐人',align:'center', width:150},
                {field: 'ctime2', title: '添加时间',align:'center', width:180/*,templet: function(data){
                    var timestamp4 = new Date(data.ctime*1000);
                    return timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8); 
                },*/},
                {fixed: 'right', width:150,title:'操作', align:'center', toolbar: '#btn'}
            ]],
            where: {handle: 0, status: 1}
        });
        layui.element.on('tab(tabs)', function(data){
            rechange.reload({
                where: {handle: $(this).data('handle'), status: 1},
                page: 1
            });
        });
        table.on('tool(rechange)', function(obj){
            var data = obj.data;
            if(obj.event == 'dy') {
                $.ajax({
                    url:"{:url('Rechange/get')}",
                    type:'post',
                    data: {'id':data.id},
                    success:function(res){
                        if(res.status == true){
                            let date = new Date();
                            let year = date.getFullYear();
                            let month = date.getMonth() + 1;
                            let day = date.getDate();
                            let hour = date.getHours();
                            let minute = date.getMinutes();

                            let rechange = res.data;
                            console.log(rechange);
                            LODOP = getLodop(document.getElementById('LODOP1'), document.getElementById('LODOP_EM1'));
                            LODOP.PRINT_INITA(0, 0, 230, 230, "打印条码");
                            LODOP.SET_PRINTER_INDEX(-1);
                            LODOP.SET_PRINT_PAGESIZE(1,580,-1,"");
                            LODOP.SET_PRINT_STYLE("FontSize", 12);
                            LODOP.SET_PRINT_STYLE("Bold", 1);
                            LODOP.ADD_PRINT_TEXT("30","30","230","20","充值明细单");
                            LODOP.SET_PRINT_STYLE("FontSize", 12);
                            LODOP.SET_PRINT_STYLE("Bold", 1);
                            LODOP.ADD_PRINT_TEXT(60, 10, 230, 20, "推荐人：" + rechange.memo);
                            LODOP.ADD_PRINT_TEXT(90, 10, 300, 20, "充值时间：" + rechange.ctime2);
                            LODOP.ADD_PRINT_TEXT(120, 10, 230, 20, "下单人：" + rechange.nickname);
                            LODOP.SET_PRINT_STYLE("FontSize", 10);
                            LODOP.SET_PRINT_STYLE("Bold", 1);
                            LODOP.ADD_PRINT_TEXT(150, 10, 230, 20, "下单手机：" + rechange.mobile);
                            LODOP.SET_PRINT_STYLE("FontSize", 12);
                            LODOP.SET_PRINT_STYLE("Bold", 1);
                            LODOP.ADD_PRINT_TEXT(180, 10, 230, 20, "充值金额：" + rechange.pay_amount + "元");
                            LODOP.SET_PRINT_STYLE("FontSize", 10);
                            LODOP.SET_PRINT_STYLE("Bold", 1);
                            LODOP.ADD_PRINT_TEXT(210, 10, 230, 20, "到账金额：" + rechange.amount + "元");
                            LODOP.ADD_PRINT_TEXT(240, 10, 230, 20, "会员卡余额：" + rechange.balance + "元");
                            let x = 240;
                            //LODOP.ADD_PRINT_TEXT(x + 30, 10, 230, 20, "打印时间：" + year + "/" + month + "/"+ day + " " + hour + ":"+ minute);
                            LODOP.SET_PRINT_STYLE("FontSize", 10);
                            LODOP.SET_PRINT_STYLE("Bold", 1);
                            if(rechange.payment_code == "wechatpay"){
                                LODOP.ADD_PRINT_TEXT(x + 60, 10, 230, 20, "支付方式：微信支付");
                            }else if(rechange.payment_code == "alipay"){
                                LODOP.ADD_PRINT_TEXT(x + 60, 10, 230, 20, "支付方式：支付宝支付");
                            }else if(rechange.payment_code == "balance"){
                                LODOP.ADD_PRINT_TEXT(x + 60, 10, 230, 20, "支付方式：会员卡余额支付");
                            }else if(rechange.payment_code == "offline"){
                                LODOP.ADD_PRINT_TEXT(x + 60, 10, 230, 20, "支付方式：桌面二维码支付");
                            }else if(rechange.payment_code == "after_pay"){
                                LODOP.ADD_PRINT_TEXT(x + 60, 10, 230, 20, "支付方式：最后离店结算");
                            }
                            LODOP.SET_PRINT_STYLE("FontSize", 8);
                            LODOP.SET_PRINT_STYLE("Bold", 0);
                            LODOP.ADD_PRINT_TEXT(x + 90, 10, 230, 20, "-----------------------------------------");
                            LODOP.PREVIEW();

                        }else{
                            layer.msg(res.msg);
                        }
                    }
                },'json')
            } else if(obj.event=='handle') {
                layer.confirm('您确定要处理该订单?', function(){
                    $.ajax({
                        type: 'POST',
                        url: "{:url('handle')}",
                        data: {id: data.id},
                        dataType: 'json',
                        success: function (respon) {
                            rechange.reload();
                            layer.msg('处理成功');
                        }
                    });
                });
            }
        });
        $('.add-room-class').click(function() {
            layer.prompt({
                    formType: 3,
                    value: '',
                    title: '修改分类名'
                 },function(val, index){
                    $.post('{:url("add")}', {name: val}, function(res) {
                        if(res.status){
                            layer.msg(res.msg,{time:1300},function(){
                                table.reload('room_class');
                            });
                        }else{
                            layer.msg('更新失败');
                        }
                        layer.close(index);
                    })
                });
        });
    });
</script>